<template>
  <div class="childlist-Tag-contain">
  <!-- <div class="childlist-Tag"  v-for="(child, index) in childrenlist" :key="index">
    <div class="child">
      <router-link class="tag-child" to="desk">{{child.name}}</router-link>
    </div>
  </div> -->
  <div class="childlist-Tag"  v-for="(child, index) in  tagListChidren" :key="index"  @click="changePost(child)" >
    <div class="child">
      <span class="tag-child" to="desk">{{child.name}}</span>
    </div>
  </div>
  </div>
</template>

<script>
import { getPostsPublic, getNavRouterId} from "@/utils/szptUtils/getPostLists.js";
export default {
    name:"tagListContain",
    data() {
      return {
      }
    },
    props:{

      /**
       * @param tagListChidren 父组件传过来的用于渲染的数据
       */
      tagListChidren:{
        type:Array,
        require:true,
      }
    },
    computed: {
      childrenlist(){
        return this.$store.state.menus.childrenlists;
      },
    },
    methods: {
      /**
       * @description 将当前的路由id,和tagID存入本地方便加载更多数据的时候后使用,向后端发送请求获取数据列表,并将数据列表存入中央事件总线中方便使用
       * @function 点击tagList改变当前的vuex里面存储的数据
       * @param tagID {String} 点击的tag获取到的id
       * @param navRouter 当前所的导航模块的对象
       */
      changePost(tagObject){
       
        const pageNum=1
        const pageSize=10
        let navRouter=JSON.parse(window.sessionStorage.getItem("navRouter"));
        window.sessionStorage.setItem("tagObject",JSON.stringify(tagObject));
        window.sessionStorage.setItem('pageNum',pageNum);
        window.sessionStorage.setItem("pageSize",pageSize)
        
        let navigatorID = navRouter.id
        let tagID = tagObject.id
        let pageInfoList=getPostsPublic(navigatorID,tagID,pageNum,pageSize)
        window.sessionStorage.setItem("pageInfoList",pageInfoList)
     
      }
    },
    mounted() {
      // console.log("初始化后第一次接受到的tagListChildren"+this.tagListChidren);
    },
}
</script>

<style scoped>
.childlist-Tag-contain{
  width: 100%;
  height: auto;
  display: flex;
  padding: 20px;
  justify-content: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
}
.childlist-Tag{
    width: auto;
    height: auto;
    right: 0;
    top: 0;
    background-color: transparent;
  }
  .child{
    width: auto;
    padding: 0 10px;
    display: inline-block;
    background-color: white;
  }
.tag-child{
    cursor: pointer;
    width: auto;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    text-decoration: none;
    color: #666;
    background-color: transparent;
    display: inline-block;
  }
  .tag-child:hover{
    background: rgb(240, 240, 240);
    color: red;
  }
</style>